<template>
  <el-dialog title="施肥" :visible.sync="dialogAddDeviceForm" @close="onClose">
    <el-row>
      <el-col :span="12">
        <span>上传 xlsx：</span>
        <input
          id="file1"
          type="file"
          accept=".xlsx"
          style="display:none"
          @change="handleFileUpload"
        >
        <el-button type="primary" @click="clickBtn">上传Excel</el-button>
        <div v-if="fileName" class="fileName"> <i class="el-icon-notebook-2" /> <span>文件名：{{ fileName }}</span> </div>
      </el-col>
    </el-row>
    <el-divider v-if="rows.length" />
    <!-- table -->
    <div v-if="rows.length" class="wrap-table">
      <div class="search-container">
        <input v-model="searchText" class="search-input" placeholder="搜索">
      </div>
      <table class="table">
        <thead class="table-head">
          <tr>
            <th v-for="(column, index) in columns" :key="index" class="table-header" @click="sortTable(column)">
              {{ column }}
              <span v-if="sortColumn === column" class="sort-icon">
                {{ sortDirection === 'asc' ? '↑' : '↓' }}
              </span>
            </th>
          </tr>
        </thead>
        <tbody class="table-body">
          <tr v-for="(row, index) in filteredRows" :key="index" class="table-row">
            <td v-for="(value, key) in row" :key="key" class="table-cell">{{ value }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleeviceCacel">取 消</el-button>
      <el-button type="primary" @click="submitForm('formattention')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  props: ['deviceId'],
  data() {
    return {
      list: [],
      dialogAddDeviceForm: false,
      fileName: '',
      columns: [],
      rows: [],
      sortColumn: '',
      sortDirection: 'asc',
      searchText: ''
    }
  },
  computed: {
    filteredRows() {
      return this.rows.filter(row => {
        return Object.keys(row).some(key => {
          return String(row[key]).toLowerCase().includes(this.searchText.toLowerCase())
        })
      })
    }
  },
  methods: {
    sortTable(col) {
      if (col === this.sortColumn) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortColumn = col
        this.sortDirection = 'asc'
      }
      this.rows.sort((a, b) => {
        let modifier = 1
        if (this.sortDirection === 'desc') modifier = -1
        if (a[this.sortColumn] < b[this.sortColumn]) return -1 * modifier
        if (a[this.sortColumn] > b[this.sortColumn]) return 1 * modifier
        return 0
      })
    },
    open() {
      this.dialogAddDeviceForm = true
    },
    // 新建树弹窗取消
    handleeviceCacel() {
      this.dialogAddDeviceForm = false
    },
    onClose() {
      this.fileName = ''
      this.form = ''
      this.list = []
    },
    clickBtn() {
      const inp = document.getElementById('file1')
      inp.click()
    },
    handleFileUpload(event) {
      console.log('event', event)
      return
      const file = event.target.files[0]
      const reader = new FileReader()
      this.fileName = file.name || ''
      reader.onload = e => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        // 在控制台打印解析后的数组
        this.columns = jsonData[0]
        this.rows = jsonData.slice(1).map(v => {
          return { ...v }
        })
        console.log('rows', this.rows)
      }

      reader.readAsArrayBuffer(file)
    },
    submitForm() {
      if (!this.list.length) {
        this.$error('请上传文件')
        return
      }
      this.$http
        .post('/api/cloud_curbs/batch_focus', {
          deviceId: this.deviceId,
          rows: this.list
        })
        .then(res => {
          if (res.success) {
            this.dialogAddDeviceForm = false
          }
        })
    }
  }
}
</script>

<style scoped lang="less">
.wrap {
  height: 320px;
  overflow-y: scroll;
}
/* 定义滚动条的宽度和高度 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* 定义滚动条的背景颜色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 定义滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 定义滚动条滑块在悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
.wrap-table {
  position: relative;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  max-height: 300px !important;
  overflow-y: scroll;
}

.search-container {
  position: sticky;
  top: 0;
  margin-bottom: 20px;
}

.search-input {
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/deep/.table {
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

}

.table-head {
  background-color: #f5f5f5;
  text-align: center;
}

.table-header {
  padding: 12px;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
}
.table-body {

}
.sort-icon {
  margin-left: 5px;
}

.table-row:nth-of-type(even) {
  background-color: #f9f9f9;
}

.table-cell {
  padding: 12px;
  text-align: left;
  font-size: 14px;
  color: #333;
}
.fileName {
  padding: 10px 0;
}

</style>
